<script setup lang="ts">
  import {
    queryDeviceDetail,
    enableMedSteward,
    disableMedSteward,
  } from '@/api/device-management/device';
  import { useSkeleton } from '@/hooks/arco/useSkeleton';
  import { useRoute } from 'vue-router';
  import { ref } from 'vue';
  import { Message, Modal } from '@arco-design/web-vue';

  import Tab1 from './tabs/tab1.vue';
  import Tab2 from './tabs/tab2.vue';

  const route = useRoute();

  const originData = ref<any>({});

  const renderDetailData = (data: any) => {
    originData.value = data;
    // TODO: 设备名称修改入口
    const detailTable = [
      {
        label: '设备ID',
        value: data.productId,
      },
      {
        label: '设备名称',
        value: data.productName,
        edit: true,
      },
      {
        label: '设备类型',
        value: data.productTypeLabel,
      },
      {
        label: '设备型号',
        value: data.productModel,
      },
      {
        label: '设备编号',
        value: data.productSn,
      },
      {
        label: '创建时间',
        value: data.createTime,
      },
    ];

    const guaranteeStatusMap: any = {
      0: '未激活',
      1: '质保中',
      2: '已出保',
    };

    const warrantyData = [
      {
        label: '生产日期',
        value: data.madeDate,
      },
      {
        label: '质保状态',
        value: guaranteeStatusMap[data.guaranteeStatus],
      },
      {
        label: '激活日期',
        value: data.activeTime,
      },
      {
        label: '质保有效期',
        value: data.validityDate,
      },
    ];
    return {
      detailTable,
      warrantyData,
      originData: data,
    };
  };

  const productId = route.query.id as string;

  const detailView = useSkeleton({
    initQueryParams: [productId],
    apiFun: queryDeviceDetail,
    transformDataFun: renderDetailData,
  });

  const systemData = [
    {
      label: '处理器',
      value: 'RK3586 四核 64位 Cortex-A55',
    },
    {
      label: '内存',
      value: '4G',
    },
    {
      label: '硬盘',
      value: '16G',
    },
    {
      label: '网络',
      value: '内置WIFI、BT4.0、4G全网通、5G全网通',
    },
    {
      label: '系统',
      value: 'Android11',
    },
  ];

  const envData = [
    {
      label: '工作温度',
      value: '-10℃~40℃',
    },
    {
      label: '存储温度',
      value: '-20℃~70℃',
    },
    {
      label: '相对湿度',
      value: '0%~95%，相对湿度，无冷凝',
    },
    {
      label: '资质',
      value: 'CCC认证、CE认证',
    },
  ];

  const onRefresh = () => {
    detailView.retry();
  };

  const beforeStatusChange = (value: any) => {
    if (value === 1) {
      return enableMedSteward(productId)
        .then(() => {
          originData.value.productStatus = 2;
          return true;
        })
        .catch(() => false);
    }

    return new Promise<boolean>((resolve) => {
      Modal.warning({
        title: '确定禁用该设备吗？',
        content: '提示：禁用后设备屏幕将被禁止操作。',
        okText: '确定',
        cancelText: '取消',
        hideCancel: false,
        onBeforeOk(done) {
          disableMedSteward(productId)
            .then(() => {
              originData.value.productStatus = 1;
              done(true);
            })
            .catch(() => done(false));
        },
        onOk: () => {
          resolve(true);
        },
        onCancel: () => {
          resolve(false);
        },
      });
    });
  };

  const isEditing = ref(false);

  const editDeviceName = () => {
    isEditing.value = true;
  };

  const onBlur = () => {
    isEditing.value = false;
    Message.success('保存成功！');
  };
</script>

<template>
  <div>
    <Teleport defer to="#title-extra">
      <a-tag
        v-if="originData.productStatus === 0"
        class="mr-2"
        color="#ff7d00"
        size="large"
      >
        未激活
      </a-tag>

      <template v-else>
        <a-switch
          v-model="originData.productStatus"
          class="mr-2"
          :checked-value="1"
          :unchecked-value="2"
          :before-change="beforeStatusChange"
        >
          <template #checked> 启用 </template>
          <template #unchecked> 禁用 </template>
        </a-switch>
      </template>
    </Teleport>

    <skeleton-view
      v-slot="{ data }"
      class="h-full"
      v-bind="detailView.bindProps"
    >
      <div class="flex flex-col h-full">
        <a-descriptions class="flex-desc">
          <a-descriptions-item
            v-for="(item, index) of data.detailTable"
            :key="index"
            :label="item.label"
            :span="item.span ?? 1"
          >
            <span v-if="!item.edit" class="value-span">{{ item.value }}</span>
            <div v-else>
              <span v-if="!isEditing">
                <span class="value-span">{{ item.value }}</span>
                <icon-edit
                  v-if="item.edit"
                  class="cursor-pointer ml-3"
                  @click="editDeviceName"
                />
              </span>
              <a-input
                v-else
                v-model="item.value"
                size="small"
                class="m-0 p-0 name-input"
                @blur="onBlur"
              />
            </div>
          </a-descriptions-item>
        </a-descriptions>
        <a-tabs class="mt-8 flex-1" justify lazy-load default-active-key="1">
          <a-tab-pane key="1" title="系统信息">
            <a-descriptions size="large" :data="systemData" :column="1" />
          </a-tab-pane>
          <a-tab-pane key="2" title="可靠性与工作环境">
            <a-descriptions size="large" :data="envData" :column="1" />
          </a-tab-pane>
          <a-tab-pane key="3" title="设备简介">
            <div class="flex flex-col gap-4">
              <h3
                class="arco-descriptions-item-label arco-descriptions-item-label-block p-0 w-full"
                >设备图片
              </h3>
              <div class="flex gap-2 p-2 flex-wrap">
                <img v-for="item in 5" :key="item" class="device-img" />
              </div>
              <h3
                class="arco-descriptions-item-label arco-descriptions-item-label-block p-0 w-full"
                >设备简介
              </h3>
              <div>
                <span>
                  药管家智能药品柜集药品库存管理与预警、用药提醒与管控、药品冷藏存储与消毒、用药数据汇总与统计等多种实用功能，为养老机构提升智慧化建设程度，同时也真正为养老机构提供差异化服务与精细化管理。
                </span>
              </div>
            </div>
          </a-tab-pane>

          <a-tab-pane key="4" title="布放信息" destroy-on-hide>
            <Tab2 :data="data.originData" @edit="onRefresh" />
          </a-tab-pane>

          <a-tab-pane key="5" title="质保信息">
            <a-descriptions
              size="large"
              :data="data.warrantyData"
              :column="1"
            />
          </a-tab-pane>

          <a-tab-pane key="6" title="副柜信息">
            <Tab1 :data="data.originData" />
          </a-tab-pane>
        </a-tabs>
      </div>
    </skeleton-view>
  </div>
</template>

<style lang="less">
  .device-img {
    width: 200px;
    height: 120px;
    background-color: #f5f5f5;
  }

  .name-input {
    .arco-input {
      margin: 0 !important;
      padding: 0 10px !important;
    }
  }

  .value-span {
    line-height: 1.5;
    height: 24px;
    display: inline-flex;
  }
</style>
